<template>
    <el-dropdown>
        <span class="el-dropdown-link">
            <i class="username">
                {{ user.userinfo.username }}
            </i>
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
  
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useUser } from '../../store/user';
import router from '../../router';
import { useGoods } from '../../store/goods';
import { userLogout } from '../../api/user'
// 获取状态机数据
const user = useUser()
const goods = useGoods()
// 退出登录

const handleLogout = () => {
    if (user.userinfo) {
        let { token } = user.userinfo
        userLogout(token).then(res => {
            localStorage.removeItem('UserLoginInfo')
            localStorage.removeItem('goodsInfo')
            user.userinfo = null
            user.cart = 0
            goods.brand_id = []
            goods.spec = []
            goods.technology = []
            goods.category = []
            router.push('/login')
        })
    }


}

const handleMine = () => {
    router.push('/mine')
}
</script>
<style scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.username {
    font-size: .0729rem;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #3F7233;
    line-height: .0885rem;
}
</style>
  